<template lang="pug">
.rating-page-wrapper
  .head
    .left
      .total-score {{seller.score}}
      .title 综合评分
      .rank 高于周边商家{{seller.rankRate}}%
    .right
      .service-score
        .title 服务评分
        .star-container
          Star(:size=36 :score="seller.serviceScore")
        .score {{seller.serviceScore}}
      .food-score
        .title 商品评分
        .star-container
          Star(:size=36 :score="seller.foodScore")
        .score {{seller.foodScore}}
      .delivery-time
        .title 送达时间
        .time {{seller.deliveryTime}}分钟
  Split
  .rating-select-container
    RatingSelect( :onlyContent="true"
                  :ratingGroup= [
                              {
                                value: 0,
                                text: "全部"
                              },
                              {
                                value: 1,
                                text: "满意"
                              },
                              {
                                value: 2,
                                text: "不满意"
                              }
                            ],
                  :ratings="ratings"
                  :currentGroup=0
                  @sendCurrentGroup="onSelectCurrentGroup"
                  @sendOnlyContent="onSelectOnlyContent")
  .rating-list-container
    RatingList(:filterRatings="filterRatings")
</template>

<script>
import {mapState} from 'vuex'
import ratingMixin from '../../static/common/mixins/rating'
import RatingSelect from '../rating-select/rating-select'
import RatingList from '../rating-list/rating-list'
import Split from '../split/split'
import Star from '../star/star'

export default {

  mixins: [ratingMixin],

  computed: {
    // 全局变量
    ...mapState({
      // 商家评价列表
      ratings: 'ratings',
      // 商品列表
      seller: 'seller',
    }),
  },

  methods: {

    //- 获取数据
    async fetch() {
      // 避免重复获取数据
      console.log('fetch')
      console.log(this.fetched)
      if(this.fetched)
        return

      //- 用vue的route对象从url中获取查询参数
      const sellerId = this.$route.query.id

      await this.$store.dispatch('getRatings', sellerId)
      console.log('获取ratings')
      console.log(this.ratings)

      await this.$store.dispatch('getSeller', sellerId)
      console.log('获取seller')
      console.log(this.seller)

      this.fetched = true
    }
  },

  components: {
    RatingSelect,
    RatingList,
    Split,
    Star
  }

}
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.rating-page-wrapper
  position:absolute
  top:0
  left:0
  right:0
  bottom:0
  .head
    margin-top:18px
    font-size:$fontsize-medium
    margin-bottom:18px
    .left
      display:inline-block
      height:100%
      width:38%
      vertical-align:top
      text-align:center
      border-right:1px solid $color-background-sss
      .total-score
        font-size:$fontsize-large-xxxx
        color:$color-orange
      .title
        margin-top:6px
      .rank
        margin-top:8px
        color:$color-light-grey
        font-size:$fontsize-medium
    .right
      display:inline-block
      height:100%
      width:62%
      vertical-align:top
      margin-left:5%
      .service-score
        .title
          display:inline-block
          font-size:$fontsize-medium
          vertical-align:middle
        .star-container
          display:inline-block
          margin-left:12px
          height:16px
          vertical-align:middle
        .score
          vertical-align:middle
          display:inline-block
          margin-left:12px
          color:$color-orange
      .food-score
        margin-top:12px
        .title
          display:inline-block
          font-size:$fontsize-medium
          vertical-align:middle
        .star-container
          display:inline-block
          margin-left:12px
          height:16px
          vertical-align:middle
        .score
          vertical-align:middle
          display:inline-block
          margin-left:12px
          color:$color-orange
      .delivery-time
        margin-top:12px
        .title
          display:inline-block
          font-size:$fontsize-medium
        .time
          display:inline-block
          margin-left:12px
          color:$color-light-grey
  .rating-select-container
    margin-top:18px
    margin-left:18px
  .rating-list-container
    position:absolute
    top:262px
    bottom:16px
    left:0
    width:100%
</style>

